<template>
  <div class="echarts-box">
    <div id="myEchart" :style="{ width: '100%', height: '600px' }"></div>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  toRef,
  toRefs,
  computed,
  watch,
  watchEffect,
  onMounted,
  onUnmounted
} from "vue";
import * as echarts from "echarts";
export default defineComponent({
  name: "commonEcharts",
  setup(props, context) {
    let echart = echarts;

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      echart.dispose;
    });

    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("myEchart"), "");
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: ["北京", "上海", "广州", "深圳", "重庆", "成都", "福建"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    }

    return {};
  },
});
</script>
<style scoped>
</style>